<template>
  <!-- 这个页面是自定义navigation -->
  <view class="content">

    <view class="searchBar">
      <input type="text" class="searchInputBox" placeholder="搜索信息">
    </view>

    <view class="userInfoColumn">
      <view class="userInfo">
        <view class="userInfo-avter">
          <image :src="'http://116.62.172.200:9999'+user.avatar" alt="用户头像"></image>
        </view>
        <view class="userInfo__text">
          <view class="userInfo_welcomeMessage">
            <text>
              您好，
            </text>
            <text class="username">
              {{ user.name }}
            </text>
          </view>
          <view class="userInfo__moreInfo">
            <view class="userInfo__moreInfo-column">
              <text class="">
                学号
              </text>
              <text class="">
                {{ user.userId }}
              </text>
            </view>
            <view class="userInfo__moreInfo-column">
              <text class="">
                班级
              </text>
              <text class="">
                {{ classname }}
              </text>
            </view>
          </view>
        </view>
      </view>
    </view>

    <view class="shortcutLinkColumn" >
      <view class="shortcutLinkBox" >
        <view class="shortcutLink-item" v-for="shortcutLink in myShortcutApplications">
          <view class="shortcutLink-img">
            <image :src="shortcutLink.applicationIcon" alt="应用图标"> </image>
          </view>
          <view class="shortcutLink-name">
            <text> {{ shortcutLink.applicationName }} </text>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 各个模块的内容 -->
    <!-- 循环生成 -->
    <home-page-function-module></home-page-function-module>
    
    
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted, computed } from 'vue'

import homePageFunctionModule from './components/homePageFunctionalModule.vue'
import { useUserInfo } from '@/stores/userInfo'

const title = ref('Hello')
const userInfo = useUserInfo().userInfos
const user = computed(() => {
  return userInfo.user
})
const classname = computed(() => {
  return userInfo.depts.map(i => {
    return i.name
  }).join('-')
})

type AppInfomation = {
  applicationName: string,
  applicationIcon: string,
  url?: string,
  function?: Function
}

const myShortcutApplications = ref<AppInfomation[]>([])

const getUserShortcutApplication = function () {
  myShortcutApplications.value = [
    {
      applicationName: '扫一扫',
      applicationIcon: '/public/image/miniApplicationIcon/Scan.png'
    },
    {
      applicationName: '电子校园卡',
      applicationIcon: '/public/image/miniApplicationIcon/ElectronicCampusCard.png'
    },
    {
      applicationName: '办事中心',
      applicationIcon: '/public/image/miniApplicationIcon/ServiceCenter.png'
    },
    {
      applicationName: '部门导航',
      applicationIcon: '/public/image/miniApplicationIcon/DepartmentNavigation.png'
    }
  ]
}

onMounted(() => {
  getUserShortcutApplication()
})
</script>

<style lang="scss" scoped>

.content {
  background-color: #F7F8FA;
  background-image: url('../../static/backgroundImage/indexPageBottomLayerBackgroundImage.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: 0 -100rpx;
  min-height: 786rpx;
}


.searchBar {
  width: 750rpx;
  height: 88rpx;
  padding: 14rpx 28rpx 10rpx 36rpx;
  box-sizing: border-box;
  background-color: transparent;
  .searchInputBox {
    width: 686rpx;
    height: 64rpx;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 78rpx 78rpx 78rpx 78rpx;
    padding: 0 24rpx;
    box-sizing: border-box;
  }
}

/* 用户信息 */
.userInfoColumn {
  display: flex;
  justify-content: flex-start;
  margin-top: 44rpx;
  padding: 0 36rpx;

  .userInfo {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20rpx;

    .userInfo-avter {
      width: 112rpx;
      height: 112rpx;

      image {
        width: 100%;
        height: 100%;
      }
      
    }
    
    .userInfo__text {
      margin-left: 24rpx;
      padding-top: 8rpx;
      color: #fff;

      .userInfo_welcomeMessage {
        font-size: 36rpx;
        line-height: 56rpx;
        font-weight: bold;
        
      }

      .userInfo__moreInfo {
        margin-top: 8rpx;
        display: flex;
        justify-content: flex-start;
        font-size: 24rpx;
        line-height: 36rpx;
        font-weight: 400;

        .userInfo__moreInfo-column {

          &>*:nth-child(2){
            margin-left: 16rpx;
          }

          &+.userInfo__moreInfo-column {
            margin-left: 32rpx;
          }
        }
      }
    }
  }
}

.shortcutLinkColumn {
  margin-top: 38rpx;
  padding: 0 28rpx 0 36rpx;
  .shortcutLinkBox {
    height: 224rpx;
    display: flex;
    justify-content: space-around;
    align-items: center;
    background: linear-gradient( 180deg, rgba(255,255,255,0.8) 0%, #FFFFFF 100%);
    box-shadow: 0rpx 16rpx 16rpx 0rpx rgba(207,233,255,0.17);
    border-radius: 24rpx 24rpx 24rpx 24rpx;
    border-radius: 24rpx;
    
    .shortcutLink-item {
      .shortcutLink-img {
        width: 96rpx;
        height:96rpx;
        image {
          width: 100%;
          height: 100%;
        }
      }
      
      .shortcutLink-name {
        margin-top: 8rpx;
        text-align: center;
        font-size: 28rpx;
        line-height: 40rpx;
        color: #1D2129;
      }
    }
  }
}

</style>
